<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="zh-cn">
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="厚和尚品" />
<meta name="keywords" content="厚和尚品" />
<title th:text="${title}">厚和尚品</title>
<link rel="apple-touch-icon-precomposed" href="" />
<link rel="apple-touch-startup-image" href="" />
<link rel="stylesheet" href="mall/css/css.css"
	th:href="@{/mall/css/css.css}" />
<link rel="stylesheet" href="mall/lib/swiper/swiper.min.css"
	th:href="@{/mall/lib/swiper/swiper.min.css}" />
<script type="text/javascript" src="mall/lib/zpeto/zepto-1.2.0.min.js"
	th:src="@{/mall/lib/zpeto/zepto-1.2.0.min.js}"></script>
<script type="text/javascript" src="mall/js/comm.js"
	th:src="@{/mall/js/comm.js}"></script>
<script type="text/javascript" src="mall/lib/swiper/swiper.jquery.min.js"
	th:src="@{/mall/lib/swiper/swiper.jquery.min.js}"></script>
</head>
<body style="padding-top: 1.1rem;">
<div class="tabs-tabs-wrap">
    <div class="tabs-tabs mui-flex">
        <nav class="cell nav-nav">
        	<ul>
        		<li><a th:class="${tid == null} ? 'active'" th:href="@{/main/list/all}">全部商品</a></li>
        		<li th:each="typeInfo : ${typeList}"><a th:class="${typeInfo.typeId == tid} ? 'active'" th:href="@{/main/list/all(typeId=${typeInfo.typeId})}" th:text="${typeInfo.typeName}">保健</a></li>
        	</ul>
        </nav>
        <div class="cell fixed arrow align-center"><img th:src="@{/mall/img/ico-arrow-right.png}" alt=""/></div> 
    </div>
</div>
<div class="g-list-wrap">
    <div class="item" th:each="proInfo : ${proList}">
        <div class="mui-flex" th:onclick="'javascript:todetail(\''+${proInfo.productId}+'\');'">
            <div class="cell fixed img">
                <img th:src="@{'/upload-dir/'+${proInfo.productId}+'/min/' + ${proInfo.smallImgPath}}" alt=""/>
            </div>
            <div class="cell cnt">
                <p class="title" th:text="${proInfo.productName}">【纯手工刀削面 360g】</p>
                <p class="desc" th:text="'市场价：￥'+${proInfo.marketPrice}">美国正品满十包包邮</p>
                <p class="price">
                    <span><span class="ftx-01" th:text="${proInfo.bonus}">200</span>积分+￥<span class="ftx-01" th:text="${proInfo.price}">59</span></span>
                    <span class="buy-btn"><img th:src="@{/mall/img/ico-basket-01.png}" alt=""/></span>
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	function todetail(productId){
		location.href='/main/getproduct/'+productId;
	}
</script>



<div class="bottom-fxied" style="left: 0px; bottom: 0px; width: 100%; display: block;">
    <div class="footer-menu">
        <a th:href="@{/main/}" class="home"><img src="mall/img/ico-home-01.png" th:src="@{/mall/img/ico-home-01.png}" alt=""/></a>
        <a th:href="@{/main/list/all}" class="link-single">全部尚品</a>
        <a th:href="@{/member/main}" class="link-single">我的订单</a>
    </div>
</div>
<script type="text/javascript">
	/*<![CDATA[*/
    //得到各种元素
    var nav = document.querySelector(".nav-nav");
    var navul = document.querySelector(".nav-nav ul");
    var navullis = document.querySelectorAll(".nav-nav ul li");

    var navW = parseInt(window.getComputedStyle(nav , null)['width']);


    //宽度
    navul.style.width = navullis.length * 81 +"px";


    console.log(navW);

    nav.addEventListener("touchstart",touchstartHandler);
    nav.addEventListener("touchmove",touchmoveHandler);
    nav.addEventListener("touchend",touchendHandler);


    var startX;
    var nowX = 0;
    var dX;

    var lastTwoPoint = [0,0];

    //开始滑动
    function touchstartHandler(event){
        navul.style.webkitTransition = "none";	//去掉过渡
        navul.style.transition = "none";	//去掉过渡
        startX = event.touches[0].pageX;	//记录起点
    }

    //滑动过程
    function touchmoveHandler(event){
        event.preventDefault();
        dX = event.touches[0].pageX - startX;	//差值

        //反映差值
        navul.style.webkitTransform = "translateX(" + (nowX + dX) + "px)";
        navul.style.transform = "translateX(" + (nowX + dX) + "px)";

        //记录最后两点的x值
        lastTwoPoint.shift();
        lastTwoPoint.push(event.touches[0].pageX);
    }

    //结束滑动
    function touchendHandler(event){
        nowX += dX;

        //多走最后两点路程的5倍路程
        nowX += (lastTwoPoint[1] - lastTwoPoint[0]) * 5;
        if(nowX > 0){
            nowX = 0;
        }

        if(nowX < -parseInt(navul.style.width) + navW){
            nowX = -parseInt(navul.style.width) + navW;
        }

        console.log(-parseInt(navul.style.width) + navW)
        //过渡时间
        //非线性衰减（canvas学习）
        var t = Math.sqrt(Math.abs(lastTwoPoint[1] - lastTwoPoint[0])) / 10;

        navul.style.webkitTransition = "all " + t + "s cubic-bezier(0.1, 0.85, 0.25, 1) 0s";
        navul.style.transition = "all " + t + "s cubic-bezier(0.1, 0.85, 0.25, 1) 0s";

        //反映多走的5倍路程：
        navul.style.webkitTransform = "translateX(" + nowX + "px)";
        navul.style.transform = "translateX(" + nowX + "px)";
    }
    /*]]>*/
</script>
</body>
</html>